/* 
  学习目标：解决setState连续调用的问题
    1.👍 推荐的方式
      注意：
      1. 只是参数改为了函数，this.setState还是异步行为
      2. 这次还是会做合并，只是合并就不覆盖前面的setState
      3. 这种语法只是为了能够多次连续调用setState

    2. 使用setState的第二个参数
      注意：  
        1.尽量不要使用这种方式，解决setState的连续调用
        2.可以在不连续调用setState的时候继续使用
*/

import React from 'react';

export default class App extends React.Component {
  state = {
    count: 0,
  };

  handleClick = () => {
    // 异步代码，会导致异步更新组件

    this.setState({ count: this.state.count + 1 }, () => {
      document.title = this.state.count;
    });

    // this.setState((preState) => {
    //   // return的对象，表示如何更新state
    //   return {
    //     count: preState.count + 1, // 0 + 1
    //   };
    // });

    // this.setState((preState) => {
    //   return {
    //     count: preState.count + 2, // 1 + 2
    //   };
    // });

    // this.setState((preState) => {
    //   return {
    //     count: preState.count + 3, // 3 + 3
    //   };
    // });

    // console.log(this.state.count);

    // this.setState({
    //   count: this.state.count + 1,
    // });

    // this.setState({
    //   count: this.state.count + 2,
    // });

    // this.setState({
    //   count: this.state.count + 3,
    // });
  };

  render() {
    console.log('render被执行了');
    return (
      <div>
        <h1>数量： {this.state.count}</h1>
        <button onClick={this.handleClick}>点我修改数量</button>
      </div>
    );
  }
}
